<template>
  <div ref="chart-ref" class="chart-ref" />
</template>

<script lang="ts" setup>
  import { useECharts } from '@/hooks/web/useECharts';
  import { onMounted, useTemplateRef, ref } from 'vue';
  import { getAllType } from '@/server/home.js';
  import type { Ref } from 'vue';

  const info = ref([]);
  const xAxis = ref([]);
  const totalNum = ref([]);
  const exportNum = ref([]);
  const chartRef = useTemplateRef<HTMLDivElement | null>('chart-ref');
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  async function loadData() {
    const res = await getAllType();
    if (res.code == 200) {
      if (res.data && res.data.length) {
        xAxis.value = res.data.map((v: { name: any }) => v.name);
        totalNum.value = res.data.map((v: { total: any }) => v.total);
        exportNum.value = res.data.map((v: { exportNum: any }) => v.exportNum);
      }
    }
  }

  onMounted(async () => {
    await loadData();
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: ['商品总数', '商品出库数'],
      },
      xAxis: {
        type: 'category',
        data: xAxis.value,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '商品总数',
          type: 'bar',
          barGap: 0,
          emphasis: {
            focus: 'series',
          },

          data: totalNum.value,
        },
        {
          name: '商品出库数',
          type: 'bar',
          barGap: 0,
          emphasis: {
            focus: 'series',
          },

          data: exportNum.value,
        },
      ],
    });
  });
</script>

<style scoped lang="scss">
  .chart-ref {
    width: 100%;
    height: 54vh;
  }
</style>
